import React, { useSyncExternalStore, useState } from 'react'

import { todosStore } from './21-todo'
export default function App() {

    // useSyncExternalStore 是用来订阅外部(非React)的数据
    const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot)

    const [str, setstr] = useState('')
    return (
        <div>
            <input type="text" value={str} onChange={e => setstr(e.target.value)} />
            <button onClick={() => {
                todosStore.addTodo(str)
            }}>点击增加</button>

            <ul>
                {todos && todos.map(item => {
                    return <li key={item.id}>{item.text}</li>
                })}
            </ul>
        </div>
    )
}
